<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml"><head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<link href="../../favicon.ico" rel="shortcut icon" />
<link href="../../base.css" rel="stylesheet" type="text/css" media="screen" />
<script src="../../jquery/jquery.js" type="text/javascript"></script>
<script src="../../event.drag/jquery.event.drag.js" type="text/javascript"></script>
<script src="../../ux/jquery.ux.js" type="text/javascript"></script>
<link href="../../ux.slider/jquery.ux.slider.css" rel="stylesheet" type="text/css" media="screen" />
<script src="../../ux.slider/jquery.ux.slider.js" type="text/javascript"></script>
<title>jquery.ux.slider</title>
</head><body>

<a href="./">&laquo; Index</a>

<style type="text/css">
.ux-slider-wrap {
	position: relative;
	float: none;
	background: url("img/ux.slider.bg.png") no-repeat 0px 0px;
	width: 300px;
	height: 300px;
	margin-right: 10px;
	}
.ux-slider-active {
	background-position: 0px 0px;
	}
.ux-slider-disabled {
	background-position: 0px 0px;
	}
.ux-slider-track {
	position: absolute;
	width: 280px;
	height: 280px;
	left: 10px;
	top: 10px;
	padding: 0;	
	}
.ux-slider-handle {
	position: absolute;
	width: 20px;
	height: 20px;
	margin: -10px 0 0 -10px;
	background: url("img/ux.slider.handle.png") no-repeat 0px 0px;
	}
.ux-slider-active .ux-slider-handle,
.ux-slider-handle:hover {
	background-position: 0px 0px;
	}
.ux-slider-disabled .ux-slider-handle {
	background-position: 0px 0px;
	}
.ux-slider-input {
	width: 100px;
	}
.box {
	width: 300px;
	height: 333px;
	float: left;
	}
table {
	border-collapse: collapse;
	}
table td {
	border: 1px solid #DDD;
	padding: 4px 8px;
	}
</style>

<script type="text/javascript">
jQuery(function($){
	$('#slider').slider({
		angle: 45
		});
	});
</script>

<h2>ux.slider / angle</h2>

<div><input type="text" id="slider" /></div>

<p>The following table describes how different angles will affect the slider direction.</p>

<table cellpadding="0" cellspacing="0" border="0"><thead>
<tr><td>Degrees</td><td>Description</td></tr>
</thead><tbody>
<tr><td>0</td><td>Left to Right</td></tr>
<tr><td>45</td><td>Top Left to Bottom Right</td></tr>
<tr><td>90</td><td>Top to Bottom</td></tr>
<tr><td>135</td><td>Top Right to Bottom Left</td></tr>
<tr><td>180</td><td>Right to Left</td></tr>
<tr><td>225</td><td>Bottom Right to Top Left</td></tr>
<tr><td>270</td><td>Bottom to Top</td></tr>
<tr><td>315</td><td>Bottom Left to Top Right</td></tr>
<tr><td>360</td><td>Left to Right</td></tr>
</tbody></table>
</body></html>